<template>
  <div class="box">
    <input type="button" value="返回主页" @click="home">
    <div class="header">鎏金哇开呀库裂哦</div>
    <div class="user">{{'用户名:   ' + user.username}}</div>
    <div class="user">{{'昵称:   ' + user.nickname}}</div>
    <div class="gifOne">
    </div>
    <div class="gifTwo">
    </div>
    <div class="list">
      <ul>
        <li
          v-for="items of list"
          :key="items.id"
          @click="chose"
          ref="li"
        >
          {{items.text}}
       </li>
      </ul>
    </div>
    <admin-users v-if="show=== 1" />
    <admin-article v-if="show=== 2" />
    <admin-gg v-if="show===3" />
  </div>
</template>

<script>
import AdminUsers from './components/adminuser'
import AdminArticle from './components/adminarticle'
import AdminGg from './components/admingg'
import { mapState } from 'vuex'
export default {
  name: 'adminUser',
  components: {
    AdminUsers,
    AdminArticle,
    AdminGg
  },
  computed: {
    ...mapState({
      user: 'nowUserIntro'
    })
  },
  data () {
    return {
      show: 1,
      list: [
        {id: '01', text: '用户管理'},
        {id: '02', text: '文章管理'},
        {id: '03', text: '公告管理'},
        {id: '04', text: '图片管理'},
        {id: '05', text: '其它'}
      ]
    }
  },
  methods: {
    home () {
      var a = confirm('你确定要离开？')
      if (a) {
        var b = confirm('你真的要离开吗？')
        if (b) {
          var c = confirm('哼╭(╯^╰)╮，滚吧')
          if (c) {
            this.$router.replace('/home')
          }
        }
      }
    },
    chose () {
      for (let i = 0; i < this.$refs.li.length; i++) {
        this.$refs.li[i].style.fontSize = '.35rem'
        if (this.$refs.li[i] === event.target) {
          event.target.style.fontSize = '.5rem'
        }
      }
      if (event.target.innerText === '用户管理') {
        this.show = 1
      } else if (event.target.innerText === '文章管理') {
        this.show = 2
      } else if (event.target.innerText === '公告管理') {
        this.show = 3
      } else if (event.target.innerText === '图片管理') {
        this.show = 4
      } else if (event.target.innerText === '其它') {
        this.show = 5
      }
    }
  },
  mounted () {
    this.$refs.li[0].style.fontSize = '.5rem'
    console.clear()
  }
}
</script>

<style lang="stylus" scoped>
  .box{
    width: 100%
    height: auto
    .gifOne{
      width: 200px
      height: 200px
      position: absolute
      left: 200px
      background: url('../../assets/images/huaji.gif')
      background-size: 100% 100%
      top: 0
    }
    .gifTwo{
      width: 200px
      height: 200px
      position: absolute
      right: 200px
      background: url('../../assets/images/huaji2.gif')
      background-size: 100% 100%
      top: 0
    }
    .header{
      text-align: center
      width: 1000px
      height: 90px
      margin: 20px auto
      border: 1px solid red
      font-size: 1.6rem
      font-family: '华文琥珀'
    }
    .user{
      margin-left: 50px
      color: red
    }
    .list{
      float: left
      margin-top: 50px
      width: 250px
      height: 700px
      border: 1px solid red
      ul{
        padding: 0
        margin: 0
        width: 100%
        height: 100%
        list-style: none
        display: flex
        flex-direction: column
        background-color: rgb(15,153,213)
        li{
          width: 100%
          cursor: pointer
          height: 60px
          border-bottom: 1px solid black
          line-height: 60px
          text-align: center
          font-size: .35rem
        }
      }
    }
  }
</style>
